<template>
	<view class="timeDowns">
		<text class="kk">{{hours}}</text>
		<text class="o">:</text>
		<text class="kk">{{minutes}}</text>
		<text class="o">:</text>
		<text class="kk">{{seconds}}</text>
	</view>
</template>

<script>
	export default {
		components: {},
		
		data() {
			return {
				timer:null,
				times:0,
				hours:'00',
				minutes:'00',
				seconds:'00'
			}
		},
		props:["start","end"],
		mounted() {
			this.timeDown()
		},
		methods: {
			timeDown() { // 倒计时
			
				clearInterval(this.timer);
				var star = this.start;
				var end = this.end
				var starttime = new Date(star.replace(/-/g, "/")) / 1000;
				var nowDate = Math.round(new Date() / 1000); // 当前时间
				//var endtime = Number(this.initActiveMsgObj.end_time); 
				var endtime = new Date(end.replace(/-/g, "/")) / 1000;
				// endtime = Math.round(new Date('2019/7/10 14:56:00') / 1000); + 60;
				if (endtime < nowDate) {
					return
				}
			
			
				var totalSeconds = parseInt((endtime - nowDate)); // 相差的总秒数
				//天数
				// var days = Math.floor(totalSeconds / (60 * 60 * 24));
				//取模（余数）
				// var modulo = totalSeconds % (60 * 60 * 24);
				var modulo = totalSeconds;
				//小时数
				var hours = Math.floor(modulo / (60 * 60));
				hours = hours < 10 ? ('0' + hours) : hours;
				modulo = modulo % (60 * 60);
				//分钟
				var minutes = Math.floor(modulo / 60);
				minutes = minutes < 10 ? '0' + minutes : minutes;
				//秒
				var seconds = modulo % 60;
				seconds = seconds < 10 ? '0' + seconds : seconds;
				//输出到页面
				this.hours = hours;
				this.minutes = minutes;
				this.seconds = seconds;
				this.times = hours + ':'+ minutes+ ':'+ seconds
				//if(totalSeconds <= 0){
				if (totalSeconds <= 60) {
					clearInterval(this.timer);
					// window.location.reload()
				} else {
					this.timer = setInterval(this.timeDown, 1000);
				}
			},
		}
	}
</script>

<style lang="less">
	.timeDowns{
		.kk {
			display: inline-block;
			vertical-align: middle;
			width: auto;
			height: 36rpx;
			background: #F04070;
			border-radius: 5rpx;
			text-align: center;
			line-height: 36rpx;
			font-size: 24rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #FFFFFF;
			padding: 0 5upx;
		}
		
		.o {
			display: inline-block;
			vertical-align: middle;
			margin-left: 5rpx;
			margin-right: 5rpx;
			font-size: 24rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #333333;
		}
	}
	
</style>
